<template>
  <div class="about">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>关于我们</span>
        </div>
      </template>

      <div>
        <h3>Vue 3 + TypeScript + Element Plus 登录示例</h3>
        <p>这是一个演示 Vue Router 路由功能的示例项目，包含以下特性：</p>

        <ul>
          <li>1. 用户登录和身份验证</li>
          <li>2. 路由导航和参数传递</li>
          <li>3. 路由守卫（权限控制）</li>
          <li>4. 动态路由组件</li>
          <li>5. 页面间的数据传递</li>
        </ul>

        <div style="margin-top: 20px;">
          <el-tag type="success">Vue 3</el-tag>
          <el-tag type="primary" style="margin-left: 10px;">TypeScript</el-tag>
          <el-tag type="warning" style="margin-left: 10px;">Element Plus</el-tag>
          <el-tag type="danger" style="margin-left: 10px;">Vue Router</el-tag>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.about {
  padding: 20px;
  max-width: 800px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul {
  padding-left: 20px;
}

ul li {
  margin: 10px 0;
}
</style>
